'use strict'
//把后端的表格信息同步过来
/*
    跨域：
        url：协议、主机地址、端口（当两个通讯里的地址这三个里面任何一个不同就叫做跨域）
        跨域这个事情本身，是浏览本身的措施或要求
 */

//文档加载完成事件的简写形式，也是最常用的形式（就是index.html读取完后就会进入到该文档）
$(function(){
    /* //可以访问指定的路径
    $.get("http://localhost:3000/product",function(result){
        console.log(result);  //这里控制台打印出来是数组
    }) */
    //1.既然控制台是数组，所以就可以遍历从后端请求获得的数据
    //2.操作js或jQuery，将混合了数据的每一行，插到表格tbDate（需要考虑移除原有的行数据）
    getProductList().then(data=>{  //getProductList返回的是resolve，所以then里面执行的就是resolve，也就相当于执行了api.js里的东西
        let tb=$('#tbData')     //拿到表格
        let rowData=$('.rowData')
        rowData.remove()     //把之前的数据全部清除，就是112233
        data.forEach(item => {
            //拿到index.html的节点
            let h=`
                <tr class="rowData">
                    <td>${item.id}</td>
                    <td>${item.productName}</td>
                    <td>${item.price}</td>
                    <td>${item.stockNum}</td>
                    <td>${item.supplier}</td>
                    <td>
                        <input type="button" value="编辑" onclick="update(${item.id})">
                        <input type="button" value="删除" onclick="del(${item.id})">
                    </td>
                </tr>
                `
            tb.append(h)    //插入到表格
        });
    })   //这里就可以为所欲为了，以后还有操作需要请求getProductList，就可以getProductList().then(),百度一下Promise的用法
})

/* function add(){
    console.log('你点了一下添加按钮');
    location.href='./addOreEdit.html'
} */


/* $(function(){
    console.log('你好，辣椒油！！');

    
}) */ 